<template>
    <!-- 新闻数据 -->
    <div>
        <div class="echarts2"></div>
        <div class="echarts"></div>

    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts';
import { likeSoaring, likeLeaderboard } from '@/request/api'
import { useRouter } from "vue-router";
const router = useRouter()
var myChart: any = null
var myChart2: any = null

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.querySelector('.echarts') as HTMLDivElement);
    myChart2 = echarts.init(document.querySelector('.echarts2') as HTMLDivElement);
    myChart.showLoading();
    myChart2.showLoading();
    likeSoaring().then(res => {
        let arr=res.data.reduce((e: string[], time) => {
                    e.push(time.title)
                    return e
                }, [])
                console.log(arr);
                
        myChart?.setOption({
            title: {
                text: '新闻飙升榜'
            },
            xAxis: {
                type: 'category',
                data: arr,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '点赞数',
                    data: res.data.reduce((e: any, time) => {
                        e.push({ value: time.increaseCount, id: time.id })                        
                        return e
                    }, []),

                    type: 'bar'
                }
            ],
            axisLabel : {//坐标轴刻度标签的相关设置。
                formatter : function(params:string){                    
                            var paramsNameNumber = params.length;// 实际标签的个数
                            console.log(params);
                            
                            if(paramsNameNumber>=7){
                                return params.slice(0,6)+'...'
                            }
                            return params
                }
            }

        });
        myChart.hideLoading();
    })
    myChart2.on('click', go); myChart.on('click', go);
    likeLeaderboard().then(res => {
        myChart2?.setOption({
            title: {
                text: '总排行榜'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            // legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: res.data.reduce((e: string[], time) => {
                    e.push(time.title)
                    return e
                }, []),
            },
            series: [
                {
                    name: '总排行榜',
                    type: 'bar',
                    data: res.data.reduce((e: any, time) => {
                        e.push({ value: time.likeCount, id: time.id })
                        return e
                    }, []),
                    seriesId: res.data.reduce((e: number[], time) => {
                        e.push(time.id)
                        return e
                    }, []),
                }
            ],
            axisLabel : {//坐标轴刻度标签的相关设置。
                formatter : function(params:string){
                 
                            var paramsNameNumber = params.length;// 实际标签的个数
                            if(paramsNameNumber>=17){
                                return params.match(/[\s\S]{17}/)+'...'
                            }
                            return params
                }
            }
        });
        myChart2.hideLoading();
    })
})


const go = (p: any) => {
    router.push({
        path: "/home/news/shownews",
        query: {
            id: p.data.id,
            name: p.name
        }
    })
}
</script>

<style lang=less  >
.echarts,
.echarts2 {
    width: 100%;
    height: 45%;
    margin-top: 20px;
}
</style>